iT邦幫忙

1

【我可以你也可以的Node.js】第三篇 - 我的全世界與你不同

  • 分享至 

  • xImage
  •  

嗨~各位大大
我是Robin
今天要來主要是分享我學習在Node與JavaScript中Global物件的差異


這篇學習目標

  • Global是什麼?(。ŏ_ŏ)
  • Global能幹嘛?(`・ω・´)
  • Global不要亂用!(╯‵□′)╯︵┴─┴
  • Node與JavaScript中Global物件的差異?

Global是什麼?(。ŏ_ŏ)

在程式語言中Global是指全域變數的意思。
所以...全域變數是什麼?
我們來看看維基百科對於全域變數說了些什麼

在程式設計中,全域變數是在所有作用域都可存取的變數,與之對應的是局部變數。

嗯...維基百科也提到了全域變數相對的就是局部變數
簡單來說全域變數就是你宣告之後不管在哪個地方你使用該變數都可以取得該值,而且不論在何處都可以對他進行修改。
而部局變數就是指說該變數只限定在該函數或是該區塊間使用。

如果還是有點不明瞭
我覺得以現實生活中可以用以下兩個Gif圖來表示我對這兩個的差異

局部變數以現實為例

我偷偷跟你說哦但是你不能跟別人說~
只限定我們這個小團體哦,說好了喔~

全域變數以現實為例

我跟你們說哦#$%$#^#$%@$!!!!
大家都是一家人!大家都可以拿!
(不知道為什麼腦中浮現有一種共產主義的概念)

以上。
希望這樣的比喻能夠幫助一起學習的讀者了解(〃∀〃)


Global能幹嘛?(`・ω・´)

如同我在上面Global是什麼中說的

全域變數就是你宣告之後不管在哪個地方你使用該變數都可以取得該值,而且不論在何處都可以對他進行修改。

比方說以下程式
建立一個html

<!DOCTYPE html>
<html>
   <head>
      <script src="add.js"></script>
      <script>
         var globalValue = 10;
         console.log(addTwoValue(10));
      </script>
   </head>
<body>

</body>
</html>

建立一個js 檔案叫做 add.js

var globalValue = 2;

function addTwoValue(input) {
   return parseInt(input) + globalValue;
}

這邊你會想說上述add.js的globalValue都沒宣告啊怎麼有值?
錯!
因為他已經在上面的html宣告了一個全域變數var globalValue = 10;,所以他抓得到該變數。
所以最後他會Return的值會是20哦!

可以通過全域變數的使用來避免常用變數在一系列函式間的頻繁傳遞。
From 維基百科

舉例來說今天有一個網頁是要介紹主角,該主角名稱名字是固定不會變動的,那就可以在網頁先把主角名稱設定為全域變數,在各個js之間就不用一直透過參數一直傳遞,畢竟主角名稱也不會變。
(但是必須要說這個案例以現在的需求來說我覺得應該是很少會遇到,如果這舉例不好可以留言跟我說有什麼例子會比較ok)


Global不要亂用!(╯‵□′)╯︵┴─┴

上面在Global敘述中感覺Global很棒棒很好啊很方便啊,什麼叫不能亂用?

我記得我在實習時聽到一位資深工程師說過一句話

你的程式老師沒教你全域變數不能亂用嗎?

當時的我一臉矇逼,根本不知道全域變數和部局變數差異和使用時機,只覺得程式能夠work就好啦幹嘛管那麼多@@?
心中OS

我老師沒說Orz ,真的。(也有可能是我沒在聽)

直到我某一次Coding時,找Bug找了超久就只因為某變數我設定到全域變數然後但我卻忘了在該專案的某處被我改動了,此時腦中浮現該工程師說的話(((゚Д゚;)))。

你的程式老師沒教你全域變數不能亂用嗎?

心中OS

沒有,但是感謝你我現在懂了。

一個心態的轉變,
我的改變,你看得見!

嗯~能想像今天如果我不止是我自己的Project,萬一與人共寫...
感覺就會非常蛋疼呀。٩(ŏ﹏ŏ、)۶


Node與JavaScript中Global的差異?(((゚Д゚;)))

這邊要講的就是在Node很不一樣的地方是在於

在Node的全域變數不是真的全域,只限定在該模組或應用程式中。

Wait Wait Wait 不對欸~
什麼意思!? 那還叫全域變數嗎?
嗯!
在Node的設計中每一個檔案文件都是獨立的模組對一個模組來說他們是!
(我的觀察啦)
但是上述說的全域變數這件事在Node中不是絕對的,
有些內建對象是 JavaScript 語言本身的一部分,所以它們是真的全域變數都可以存取的。詳細有哪些可以看這個

來用Code看一下他與上面提的Global差異吧~
建立一個add.js模組

# add.js

var globalValue = 2;

exports.add = function(input) {
  return parseInt(input) + globalValue;
};

再建立一個Node應用程式test.js

# test.js
var add = require('./add.js').add;

var globalValue = 10;

console.log(add(globalValue));

以上面在js中所看到的test.js的globalValue會被全域變數取代成10對吧!?
但是在Node中在add.js這個模組內是看不到外面的世界的。
也就是他只會吃到他裡面var globalValue = 2;這行
所以輸出會是12

另外
在Node之中可以使用以下

console.log(global);

來查看目前可用的global物件有哪些
以上。

有任何問題都可以在底下留言跟我說
這篇結束囉~~~~


這篇小心得

越來越覺得學習東西有時候並不難,難的是如何表述讓他人知道,這件事就基於你必須真的懂,因為連你都不懂了怎麼可能讓他人了解你想表述的事情。

目前看得進度真的是很少xDDD
以這張GIF表述我現在的心境

感謝各位大大讀到這!(灬ºωº灬)
(這篇的幹話好像少很多)

下篇會討論Node中另一個全域物件Process


參考來源

Banner設計於canva
顏文字複製來源
GIF來源
我買的這本


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
fongyi
iT邦新手 5 級 ‧ 2020-02-23 10:50:12

那個...globalValue是不是被宣告了兩遍啊?

fongyi iT邦新手 5 級 ‧ 2020-02-23 10:53:13 檢舉

喔沒事我懂了XD

Robin iT邦新手 2 級 ‧ 2020-02-23 15:37:02 檢舉

xDD 不管如何/images/emoticon/emoticon34.gif
感謝你看我的文章

我要留言

立即登入留言